import React 						from 'react';

class ListSearch extends React.Component{
	constructor(props) {
	    super(props);
		this.state = {
			searchType:'',
			searchKeyWord:''
		}
	}
	
	componentDidMount(){
		this.setState({
			searchType:this.props.optionalType[0].value
		});
	}
	onValueChange(e){
		this.setState({
			[e.target.name]:e.target.value
		});
	}
	
	onSearch(){
		this.props.search(this.state.searchType,this.state.searchKeyWord);
	}
	
	render(){
		return (
			<div className="row search-wrap">
				<div className="col-md-12">
					<div className="form-inline">
						<div className="form-group">
							<select className="form-control" 
									name="searchType" 
									onChange={e => this.onValueChange(e)} >
									{
										this.props.optionalType.map((option,index) => {
											return <option value={option.value} key={index}>{option.name}</option>
										})
									}
								
							</select>
						</div>
						<div className="form-group">
							<input type="text" 
								className="form-control" 
								placeholder="关键词"
								name="searchKeyWord"
								onChange={e => this.onValueChange(e)}
							/>
						</div>
						<button className="btn btn-primary" onClick={this.onSearch.bind(this)}>搜索</button>
					</div>
				</div>
			</div>
		)
	}
}

export default ListSearch;
